<template>
    <div>
        <div style="font-size: 12px;">CQGCT</div>
        <h5 align="center">CHINA OCEAN SHIPPING TALLY COMPANY</h5>
        <h1 align="center">STATEMENT OF TALLY ACCOUNT</h1>
        <el-row style="margin-top: 80px;">
            <el-col :span="6"><div class="grid-content bg-purple">Vessel:{{vessel}}</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple-light">Voy:</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple">Nationality:</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple-light">Date of list:{{printTime}}</div></el-col>
        </el-row>
        <table border="1" cellspacing="0" style="width: 800px;">
            <tr style="text-align: center">
                <td rowspan="2">Tally Item</td>
                <td colspan="2">Count size</td>
                <td rowspan="2">Quantity</td>
                <td rowspan="2">Unit</td>
                <td rowspan="2">Charging Rate</td>
                <td rowspan="2">Amount(yuan)</td>
            </tr>
            <tr style="text-align: center">
                <td style="width: 65px;">40</td>
                <td style="width: 65px;">20</td>
            </tr>
            <tr v-for="item in total" style="text-align: center">
                <td>{{item.portIMEX}}</td>
                <td>{{item.containerNum4}}</td>
                <td>{{item.containerNum2}}</td>
                <td>{{item.feeNum}}</td>
                <td>{{item.feeUnit}}</td>
                <td style="text-align: right;">{{item.strFeeRate}}</td>
                <td style="text-align: right;">{{item.money}}</td>
            </tr>
            <tr style="text-align: left;">
                <td colspan="6">Amount totalled(in words)</td>
                <td></td>
            </tr>
        </table>
        <el-row>
            <el-col :span="6"><div class="grid-content bg-purple">in Charge:</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple-light">Checked by:</div></el-col>
            <el-col :span="8"><div class="grid-content bg-purple">Prepared by: {{loginUserName}}</div></el-col>
            <el-col :span="2"><div class="grid-content bg-purple-light">(Stamped)</div></el-col>
        </el-row>
    </div>
</template>

<script>
    import { getBalanceTotalPrint } from "@/api/balance/balance";

    export default {
        name: "total",
        data() {
            return {
                total: [],
                printTime : null,
                vessel : null,
                loginUserName : null
            }
        },
        created() {
            this.loadData()
        },
        methods: {
            loadData() {
                const id = this.$route.params.id
                getBalanceTotalPrint(id).then(res => {
                    this.total = res.data.totaldata
                    this.printTime = res.data.curDateTime
                    this.vessel = res.data.accountUnit
                    this.loginUserName = res.data.loginUserName
                    let count = 0
                    let quantityCount = 0
                    this.total.map(m => {
                        m.feeNum = Number(m.containerNum2)+(Number(m.containerNum4)*2)
                        m.feeUnit = m.feeUnit.replace("月累计", "")
                        count = count + Number(m.money)
                        quantityCount = quantityCount + Number(m.feeNum)
                    })
                    this.total.push({
                        portIMEX: 'Total',
                        money: count+".00",
                        feeUnit:'TEU',
                        feeNum : quantityCount
                    })
                    this.$nextTick(() => {
                        window.print()
                        window.close();
                    })
                })
            }
        }
    }
</script>

<style scoped>

</style>
